<template>
  <header class="header">
    <img src="../assets/logo2.png" alt="源力星球logo" class="logo">
    <img src="../assets/智能客服.png" alt="" class="my-img" @click="clickBoot" title="智能AI助手">
  </header>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
  const router = useRouter();
  const clickBoot = () => {
    router.push('/deepSeek');
  }
  
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .logo {
    height: 4rem;
    // vertical-align: hidden;
  }

  .my-img {
    height: 40px;
    width: 40px;
    margin-right: 30px;
    
    cursor: pointer; // 添加鼠标为手型
    vertical-align: hidden;

  transition: all 0.3s ease; // 平滑过渡
  border-radius: 50%; // 圆形图片（可选）

  &:hover {
    transform: scale(1.1); // 悬停时放大 10%
  }

  &:active {
    transform: scale(0.95); // 点击时缩小一点，模拟按钮按下效果
  }

    
  }


}



.nav {
  display: flex;
  gap: 1rem;
}
.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.btn {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}
</style>
